@import 'utils';

#search-shop-detail .goods-column2{
    margin:0;
}
#search-shop-detail .goods-list ul{
    padding:0 0 0 rem(8px)
}
.shopIcon_masker{
    position:absolute;
    top:0;
    left:0;
}
.shopIcon_masker_detail{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:rem(-30px);
    margin-left:rem(-30px);
}
.searchError{
    background-color:#ededed;
    text-align: center;
    padding:rem(30px) rem(16px);
}
//初始化失败
.shop-noData{
    height:100%;
    width:100%;
    background-color: #fff;
    text-align: center;
    img{
        display: block;
        padding:20% 0 0;
        box-sizing: content-box;
        margin:0 auto;
        width:rem(160px);

    }
    p{
        color:#999;
        padding:rem(20px) rem(16px);
        text-align: center;
        font-size:rem(14px);
    }
}



//搜索头部
.background100 {
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}
.search-padding-head{padding-top:rem(45px)}
.search-outer {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: rem(8px) rem(50px) rem(8px) rem(16px);
    background: $bgWhite;
    .back {
        height: rem(20px);
        margin: rem(4px) 0;
        .icon-back {

        }
    }
    &.hasback {
        #search_form {
            margin-left: rem(22px);
        }
    }
    &.shop-search-head {
        #search_form {
            padding: 0 rem(24px) 0 rem(28px);
            .btn-search {
                left: 0;
            }
        }
    }
    .search-cart {
        position: absolute;
        top: rem(8px);
        right: rem(16px);
        background: url("../images/icon_cart.png") no-repeat right top;
        width: rem(32px);
        height: rem(28px);
        background-size: auto 100%;
        &.active {
            background: url("../images/icon_cart_active.png") no-repeat right top;
            background-size: auto 100%;
        }
        button {
            position: absolute;
            top: 0;
            right: rem(-4px);
            display: inline-block;
            padding: rem(1px) rem(3px);
            border-radius: rem(6px);
            height: rem(12px);
            line-height:rem(12px);
            font-size: rem(10px);
            background-color: #ff5c33;
            color: #fff;
        }
    }
    .search-cacel {
        position: absolute;
        top: rem(8px);
        right: rem(16px);
        width: rem(32px);
        height: rem(28px);
        line-height: rem(28px);
        color: #777;
        text-align: right;
    }
    #search_form {
        position: relative;
        padding: 0 rem(24px) 0 rem(114px);
        -webkit-border-radius: rem(28px);
        border-radius: rem(28px);
        background: #f5f5f5;
        .search-type {
            position: absolute;
            top: 0;
            left: rem(12px);
            width: rem(66px);
            height: rem(28px);
            line-height: rem(28px);
            .search-line {
                position: absolute;
                top: rem(4px);
                right: rem(-8px);
                width: 0;
                height: rem(20px);
            }
            .search-ico-close {
                position: absolute;
                top: 0;
                right: 0;
                width: rem(6px);
                height: rem(28px);
                background: url("../images/icon_search-close.png") no-repeat center;
                -webkit-background-size: 100% auto;
                background-size: 100% auto;
            }
            .search-type-text {
                font-size: rem(12px);
            }
            ul {
                display: none;
                z-index: 3;
                position: absolute;
                top: rem(32px);
                left: rem(-12px);
                background-color: #fff;
                width: rem(84px);
                border-radius: rem(5px);
                li {
                    position: relative;
                    padding: 0 0 0 rem(12px);
                    height: rem(40px);
                    line-height: rem(40px);
                    font-size: rem(13px);
                    color: #777;
                }
                li.active {
                    color: #464646;
                    &:after {
                        position: absolute;
                        right: rem(8px);
                        top: rem(18px);
                        content: '';
                        width: rem(4px);
                        height: rem(4px);
                        background: #ff5d3d;
                        -webkit-border-radius: 50%;
                        border-radius: 50%;
                    }
                }
            }
            &.on {
                .search-ico-close {
                    transform: rotate(180deg);
                }
                ul {
                    display: block;
                }

            }
        }
        .btn-search {
            position: absolute;
            left: rem(86px);
            top: 0;
            width: rem(28px);
            height: rem(28px);
            background: url("../images/icon_search1.png") no-repeat center;
            -webkit-background-size: rem(15px) rem(15px);
            background-size: rem(15px) rem(15px);
            &.active {
                background: url("../images/icon_search_active.png") no-repeat center;
                -webkit-background-size: rem(15px) rem(15px);
                background-size: rem(15px) rem(15px);
            }
        }
        .search-result-num {
            position: absolute;
            top: 0;
            right: rem(30px);
            display: inline-block;
            height: rem(28px);
            line-height: rem(28px);
            text-align: right;
            font-size: rem(12px);
            color: #999;
        }
        input {
            width: 100%;
            height: rem(28px);
            text-align: left;
            font-size: rem(12px);
            background-color: transparent;
        }
        i {
            position: absolute;
            right: rem(8px);
            top: 50%;
            display: block;
            width: rem(14px);
            height: rem(14px);
            margin-top: rem(-7px);
            @extend .background100;
            background-image: url("../images/del.png");
            visibility: hidden;
            &.visible {
                visibility: visible;
            }
        }
    }
}

//商铺收藏，分享
.shop-share{
    z-index:10;
    position:absolute;
    top:rem(29px);
    right:rem(30px);
    width:rem(30px);
    height:rem(30px);
    background: url("../images/shop-share.png") no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
}
.shop-collection{
    z-index:10;
    position:absolute;
    top:rem(29px);
    right:rem(80px);
    width:rem(30px);
    height:rem(30px);
    background: url("../images/shop_collection.png") no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
    &.active{
        background: url("../images/shop_collection_action.png") no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
}
.share-pop{
    z-index:999;
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    .share-cnt{
        text-align: center;
        color: #fff;
        font-size: rem(20px);
        padding:20%;
    }
}
//商铺详情呼叫电话
#tel-pop{
    display: none;
    z-index: 999;
    position:fixed ;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    .tel-box{
        position:absolute;
        top:50%;
        left:50%;
        width:rem(270px);
        margin-top:rem(-60px);
        margin-left:rem(-135px);
        border-radius:rem(10px);
        background-color: rgba(255,255,255,1);
        p{
            height:rem(56px);
            line-height:rem(56px);
            text-align: center;
            font-size:rem(16px);
            border-bottom:1px solid #e6e6e6;
            border-width: 0.5px;
        }
        .tel-btn{
            display: flex;
            a{
                flex:1;
                text-align: center;
                height:rem(48px);
                line-height:rem(48px);
                font-size:rem(16px);
            }
            #tel-btn-confirm{
                color:#349bf0;
                border-left:1px solid #e6e6e6;
                border-width: 0.5px;
            }
        }
    }
}

//店铺内容
#search-shop-detail{
    padding-top:0;
    img {
        object-fit: cover;
    }
}
.shop-index{
    padding: rem(18px) rem(15px);
    .wrap{
        display: block;
        border: 1px solid #ccc;
        -webkit-border-radius: rem(15px);
        border-radius: rem(15px);
        overflow: hidden;
    }
    .shop-bg{
        position: relative;
        z-index: 1;
    }
    .shop-con{
        position: relative;
        z-index: 1;
        top: rem(-10px);
        left: 0;
        right: 0;
        z-index: 2;
        .shop-juchi{
            width: 100%;
            height: rem(10px);
            background: url('../images/bg_shop_juchi.png') no-repeat center top;
            -webkit-background-size: 100% rem(10px);
            background-size: 100% rem(10px);
        }
    }
}
.shop-detail{
    .shop-info{
        padding: rem(17px) rem(16px) rem(15px);
        text-align: center;
        .shop-img{
            float: none;
            width: 100%;
            img{
                width: rem(60px);
                height: rem(60px);
            }
        }
        .shop-main{
            width: 100%;
            margin: 0;
            .scores{
                display: inline-block;
            }
            .zhuying{
                margin-top: rem(6px);
                line-height: rem(12px);
                font-size: rem(12px);
            }
        }
    }
}
.shop-contact{
    ul{
        margin-left: rem(16px);
        li{
            padding: rem(16px) rem(16px) rem(16px) 0;
           a{
                display: inline-block;
                padding-left: rem(26px);
                line-height: rem(16px);
                font-size: rem(14px);
                &.time{
                    background: url('../images/icon_shop_time.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
                &.address{
                    background: url('../images/icon_shop_address.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
                &.tel{
                    background: url('../images/icon_shop_tel.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
            }
        }
    }
}
.shop-other-info{
    padding: rem(18px) rem(16px);
    h2{
        font-size: rem(14px);
        line-height: rem(14px);
        color: #999;
    }
    .shop-promotion{
        padding: 0;
        margin: rem(20px) 0;
        border-top: 0;
        li{
            color: $bodyFontColor;
        }
    }
    .shop-env{
        margin-top: rem(10px);
        li{
            float: left;
            width: 32%;
            margin: rem(5px) 0 0 rem(5px);
            &:nth-child(3n+1){
                margin-left: 0;
            }
            img{
                border: rem(1px) solid #ccc;
            }
        }
    }
}
.shop-info {
    padding: rem(5px) rem(20px) rem(12px);
    .shop-img {
        float: left;
        width: rem(60px);
        height: rem(60px);
    }
    .shop-main {
        margin-left: rem(70px);
        h2 {
            height: rem(16px);
            line-height: rem(16px);
            font-size: rem(14px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .scores {
            height: rem(12px);
            margin-top: rem(10px);
            line-height: rem(12px);
            overflow: hidden;
            s, i, em {
                float: left;
                display: block;
                font-size: rem(12px);
            }
            s {
                width: rem(12px);
                height: rem(12px);
                margin-right: rem(3px);
                &.score1 {
                    background: url('../images/icon_star1.png') no-repeat center top;
                    -webkit-background-size: 100% auto;
                    background-size: 100% auto;
                }
                &.score0-5 {
                    background: url('../images/icon_star0.5.png') no-repeat center top;
                    -webkit-background-size: 100% auto;
                    background-size: 100% auto;
                }
                &.score0 {
                    background: url('../images/icon_star0.png') no-repeat center top;
                    -webkit-background-size: 100% auto;
                    background-size: 100% auto;
                }
            }
            i {
                margin-left: rem(2px);
            }
            em {
                margin-left: rem(4px);
            }
        }
        .services {
            min-height: rem(15px);
            margin-top: rem(10px);
            overflow: hidden;
            em {
                display: inline-block;
                height: rem(15px);
                width: rem(60px);
                margin-right: rem(5px);
                &.song {
                    background: url('../images/icon_kewaisong.png') no-repeat center top;
                    -webkit-background-size: auto 100%;
                    background-size: auto 100%;
                }
                &.qu {
                    background: url('../images/icon_keziqu.png') no-repeat center top;
                    -webkit-background-size: auto 100%;
                    background-size: auto 100%;
                }
                &.tang {
                    background: url('../images/icon_ketangshi.png') no-repeat center top;
                    -webkit-background-size: auto 100%;
                    background-size: auto 100%;
                }
            }
        }
    }
}

.shop-promotion {
    padding: rem(8px) rem(20px) rem(4px);
    border-top: 1px solid #eee;
    ul {
        li {
            height: rem(15px);
            padding-left: rem(22px);
            margin-top: rem(7px);
            font-size: rem(12px);
            line-height: rem(15px);
            color: #999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.xin {
                background: url('../images/icon_xin.png') no-repeat left top;
                -webkit-background-size: auto rem(15px);
                background-size: auto rem(15px);
            }
            &.hui {
                background: url('../images/icon_hui.png') no-repeat left top;
                -webkit-background-size: auto rem(15px);
                background-size: auto rem(15px);
            }
            &.bao {
                background: url('../images/icon_bao.png') no-repeat left top;
                -webkit-background-size: auto rem(15px);
                background-size: auto rem(15px);
            }
        }
    }
}

.shop-goods {
    .navigator {
        padding: 0 rem(15px);
        border-top: rem(1px) solid #ccc;
        border-bottom: rem(1px) solid #ccc;
        background: #eee;
        white-space: nowrap;
        font-size: 0;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow: auto;
        a {
            display: inline-block;
            height: rem(42px);
            line-height: rem(42px);
            min-width: rem(56px);
            margin-left: rem(20px);
            font-size: rem(14px);
            color: #999;
            text-align: center;
            &:first-child {
                margin-left: 0;
            }
            &.active {
                color: $chiefColor;
                background: url('../images/icon_nav_active.png') no-repeat center bottom;
                -webkit-background-size: 100% rem(2px);
                background-size: 100% rem(2px);
            }
        }
    }
}

.shop-qizhi {
    width: 100%;
    height: rem(2px);
    background: url('../images/bg_caitiao.png') repeat center top;
    -webkit-background-size: 100% rem(2px);
    background-size: 100% rem(2px);
}

.shop-list {
    .shop-item {
        .wrap {
            display: block;
        }
        .shop-info {
            padding-top: rem(15px);
        }
        .shop-promotion {
            padding-bottom: rem(15px);
        }
    }
}

.shop-detail {
    .shop-info {
        padding: rem(17px) rem(16px) rem(15px);
        text-align: center;
        .shop-img {
            float: none;
            width: 100%;
            img {
                width: rem(60px);
                height: rem(60px);
            }
        }
        .shop-main {
            width: 100%;
            margin: 0;
            .scores {
                display: inline-block;
            }
            .zhuying {
                margin-top: rem(6px);
                line-height: rem(12px);
                font-size: rem(12px);
            }
        }
    }
}

.shop-contact {
    ul {
        margin-left: rem(16px);
        li {
            padding: rem(16px) rem(16px) rem(16px) 0;
            span {
                display: inline-block;
                padding-left: rem(26px);
                line-height: rem(16px);
                font-size: rem(14px);
                &.time {
                    background: url('../images/icon_shop_time.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
                &.address {
                    background: url('../images/icon_shop_address.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
                &.tel {
                    background: url('../images/icon_shop_tel.png') no-repeat left center;
                    -webkit-background-size: auto rem(16px);
                    background-size: auto rem(16px);
                }
            }
        }
    }
}

.shop-other-info {
    padding: rem(18px) rem(16px);
    h2 {
        font-size: rem(14px);
        line-height: rem(14px);
        color: #999;
    }
    .shop-promotion {
        padding: 0;
        margin: rem(20px) 0;
        border-top: 0;
        li {
            color: $bodyFontColor;
        }
    }
    .shop-env {
        margin-top: rem(10px);
        li {
            float: left;
            width: 32%;
            margin: rem(5px) 0 0 rem(5px);
            &:nth-child(3n+1) {
                margin-left: 0;
            }
            img {
                border: rem(1px) solid #ccc;
            }
        }
    }
}

.goods-column2 li a .good-info h3 {
    height: rem(38px);
}

.tips {
    text-align: center;
    font-size: rem(14px);
    height: rem(20px);
    line-height: rem(20px);
    width: 100%;
}

.goods-list {
    padding:0 0 rem(20px);
    li {
        position: relative;
    }
    .icon-add {
        position: absolute;
        right: rem(18px);
        bottom: rem(12px);
    }
}
@media all and(min-height: 320px) {
    .shop-bg{
        img{
            height:rem(66px);
        }
    }
}
@media all and(min-height: 360px) {
    .shop-bg{
        img{
            height:rem(76px);
        }
    }
}
@media all and(min-height: 375px) {
    .shop-bg{
        img{
            height:rem(80px);
        }
    }
}
@media all and(min-height: 400px) {
    .shop-bg{
        img{
            height:rem(86px);
        }
    }
}
@media all and(min-height: 414px) {
    .shop-bg{
        img{
            height:rem(88px);
        }
    }
}
@media all and(min-height: 435px) {
    .shop-bg{
        img{
            height:rem(93px);
        }
    }
}